<!--
* @Description: 监控点配置/总监控点配置/关联公式
* @Author: yihua
* @Date: 2023/3/29 12:28
* @LastEditTime: 2023/3/29 12:28
-->
<template>
  <div class="formula-list-box">
    <div class="formula-list-title"> 关联公式：</div>
    <div class="formula-list">

      <div class="formula-item-box" v-for="(it,index) in boxItemList" :key="index">
        <el-form action="" :modal="it.formCorrelate">
        <div class="del-icon" @click="delItem(index)">
          <div class="iconfont" title="删除">&#xe62f;</div>
        </div>
         <div class="formula-item">
          <el-row :gutter="20">
            <el-col :span="5">
              <el-form-item label="一级项" prop="scope1">
                <el-select  v-model.trim="it.formCorrelate.scope1" placeholder="请选择" prop="scope1">
                  <el-option v-for="item in cartory1" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="二级项" prop="scope1">
                <el-select v-model.trim="it.formCorrelate.scope2" placeholder="请选择" prop="scope2">
                  <el-option v-for="item in cartory2" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="三级项" prop="scope3">
                <el-select v-model.trim="it.formCorrelate.scope3" placeholder="请选择" prop="scope3">
                  <el-option v-for="item in cartory3" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="单位" prop="unit">
                <el-input v-model.trim="it.formCorrelate.unit" placeholder="请输入单位" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="聚合方式" prop="aggregation" style="width: 100%">
                <el-select label="" v-model.trim="it.formCorrelate.aggregation" placeholder="请选择" prop="aggregation">
                  <el-option v-for="item in aggregationList" :key="item.value" :label="item.name" :value="item.value"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div>
            <el-form-item label="公式" style="width: 100%;">
              <div class="formula_container iotInput" id="4" @click="openFormula(formulaHtmlValue)">
                <span class="formula_content">
                  <span class="formula_show"  ref="algorithmInput" v-html="formulaHtmlValue">
                  </span>
                </span>
                <el-tooltip  :content="formulaHtmlInputValue" placement="top" popper-class="space-auth-status-tip" v-if="formulaHtmlInputValue">
                  <span><el-icon class="el-icon&#45;&#45;right" :size="18" style="margin-top:5px;"><Warning /></el-icon></span>
                </el-tooltip>
                <span v-else><el-icon class="el-icon--right" :size="18" style="margin-top:5px;"><Warning /></el-icon></span>
              </div>
            </el-form-item>
          </div>
        </div>
        </el-form>
      </div>
      <autoRuleFormula ref="autoRuleFormulaRef"  @changeAlgorithmInput="changeAlgorithmInput"/>
    </div>
    <el-button type="primary" :icon="'Plus'" class="formula-list-btn" @click="addList">新增</el-button>
  </div>
</template>
<script setup lang="ts">
  import { reactive , defineProps, getCurrentInstance ,defineExpose , nextTick, ref, defineEmits } from 'vue';
  type FormInstance = InstanceType<typeof ElForm>;
  import autoRuleFormula from './autoRuleFormula.vue'
  import { delHtmlTag } from '@/utils/stringUtils';
  import { totalPonit, fourType, real_point, carbon_industries, carbon_metrics }  from './backResMonotor.ts'

  let dialogVisible = ref(false)

  interface Props {
    modelType?: number, // 1
    monthNumber?:number,
  }

  const props = defineProps<Props>()
  const {modelType,monthNumber} = props

  const formRules = {
    audit_comment: [
      {
        'required': true,
        'message': `请输入驳回意见`,
        'trigger': `blur`
      }, {
        'max': 140,
        'message': `长度不能超过140字`,
        'trigger': `blur`
      }
    ]
  }

  const cartory1 = carbon_metrics.filter((item:any)=> item.catalog == 1)
  const cartory2 = carbon_metrics.filter((item:any)=> item.catalog == 2)
  const cartory3 = carbon_metrics.filter((item:any)=> item.catalog == 3)
  const aggregationList = [{name:'平均值',value:'avg'},{name:'求合',value:'sum'}]
  const formCorrelateRef = ref();
  let formCorrelate = reactive({
    'code': ``,
    'formula': ``
  });

  let formulaHtmlValue = ref('')
  let formulaHtmlInputValue = ref('')

  const autoRuleFormulaRef = ref(null)
  const openFormula = (row) => {
    console.log('row',row);
    autoRuleFormulaRef.value && autoRuleFormulaRef.value.open(row);
  }

  // 从子组件接收过来的值
  const changeAlgorithmInput = (e) =>{
    console.log('从子组件接收过来的值',e);
    formulaHtmlValue.value = e.value;
    formulaHtmlInputValue.value = delHtmlTag(e.value);
  }

  let boxItemList = ref([])
  const addList = ()=>{
    console.log(66666666666);
    boxItemList.value.push({formCorrelate: {}})
  }
  const delItem = (index)=>{
    boxItemList.value.splice(index,1);
  }



</script>
<style scoped lang="scss">
  .formula-list-box{
    margin-top: 20px;
    .formula-list-title{
      margin-bottom: 20px;
    }
    .formula-list-btn{
      margin-top: 10px;
      margin-bottom: 15px;
    }
  }
  .formula-list {
    .formula-item-box{
      padding: 15px 40px 0px 10px;
      background: #f9f9f9;
      border-radius: 3px;
      margin-bottom: 15px;
    }
    .del-icon{
      float: right;
      margin-right: -30px;
      padding-top: 30px;
      width: 20px;
      cursor: pointer;
      color:#a5a5a5
    }
  }
</style>